<template>
  <div class="homePage_box">
    <Search />
    <div id="content">
      <AreaNav />
      <Banner />
      <router-link to="ActiveAll">
        <div class="mainPlace">
          <img src="@/assets/binbing/homePageImg/mainPlace.gif" />
        </div>
      </router-link>
      <NavIcon />
      <Seckill />
      <router-link to="NewpeopleAll">
        <div class="newGift">
          <img src="@/assets/binbing/homePageImg/newGift.gif" />
        </div>
      </router-link>

      <New />
      <GuessYourLike />
    </div>
    <FooterNav />
  </div>
</template>

<script>
import Search from "./components/homePage/Search.vue";
import AreaNav from "./components/homePage/AreaNav.vue";
import Banner from "./components/homePage/Banner.vue";
import NavIcon from "./components/homePage/NavIcon.vue";
import Seckill from "./components/homePage/Seckill.vue";
import New from "./components/homePage/New.vue";
import GuessYourLike from "./components/homePage/GuessYourLike.vue";
import FooterNav from "./components/homePage/FooterNav.vue";

export default {
  components: {
    Search,
    AreaNav,
    Banner,
    NavIcon,
    Seckill,
    New,
    GuessYourLike,
    FooterNav,
  },
};
</script>

<style scoped>
.homePage_box {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

::-webkit-scrollbar {
  display: none;
}

#content {
  flex: 1;
  overflow: auto;
  background-color: #f1f3f5;
  padding-bottom: 0.08rem;
}

.mainPlace {
  width: auto;
  height: 1.28rem;
  padding: 0 0.16rem;
}

.mainPlace img {
  width: 3.82rem;
  height: 1.28rem;
  display: block;
  overflow: hidden;
  border-radius: 0.16rem;
}

.newGift {
  width: 3.82rem;
  height: 1.54rem;
  margin: 0.08rem auto;
  border-radius: 0.16rem;
  overflow: hidden;
}

.newGift img {
  width: 3.82rem;
  height: 1.54rem;
}
</style>